<template>
  <div id="app">
    <div id="loading" v-show="shopShow">正在加载出租车数据...</div>
    <div id="menuLeft">
      <div id="step1">
            <h4>数据选择：</h4>
            <el-cascader
                    ref="getSelectData"
                    placeholder="请选择需要渲染的数据"
                    v-model="dataValue"
                    :options="options"
                    @change="handleSelectChange"
                    filterable></el-cascader>
          </div>
      <div id="step2">
            <h4>选择散点图渲染方式</h4>
            <div class="VisualShow">
              <el-button @click="addPonit1" :disabled="isDisabled" class="scatter-button">散点图1</el-button>
              <el-button @click="addPonit2" :disabled="isDisabled" class="scatter-button">散点图2</el-button>
            </div>
          </div>
    </div>
    <div ref="map" id="map_container" style="height:100%;width:100%;"></div>
  </div>
</template>

<script>

  import 'echarts/extension/bmap/bmap'
  import {baidumap} from '@/assets/js/Public/baiduditu'
export default {
  components: {},
  data() {
    return {
      isDisabled: true,
      shopShow: false,
      map : Function,
      view:{},
      fullscreenLoading: false,
      loading : {},

      // 原Echarts移植过来的map底图
      mapStyle: {
        styleJson: baidumap,
      },
      mapLng: 116.403,
      mapLat: 39.923,
      mapZoom: 12,
      options: this.$store.state.dataPoint[0].children,
      dataValue: [],
      taxiData:[],
      hotData:[],
      vecdata : [],
      geodata:[],
      girddata:[],
      maxMag : 0 ,
      minMag : 15,
      downSelectData: '',
      scatterData: ''
    };
  },
  beforeCreate() {
    this.$store.commit('loadMenuDataPoint')
  },
  created() {

  },
  mounted() {
    this.initMapv()
  },
  computed: {},
  methods: {
    handleSelectChange(val){
      this.shopShow = true
      this.isDisabled = true
      let downSelectData = this.$refs.getSelectData.getCheckedNodes()
      this.downSelectData = downSelectData[0].data.value
      console.log(this.downSelectData,'获取下拉节点的值');
      this.request.get("/taxiData/clickHot",
          {
            params:{
              downSelectData: this.downSelectData,
            }
          },
      ).then(res => {
        this.scatterData = res.data
        console.log(this.scatterData,'散点图数据')
        this.shopShow = !this.shopShow
        this.isDisabled = !this.isDisabled
      })
    },

    initMapv(){
      this.map = initMap({
        tilt: 60,  //地图倾斜
        heading: 0,
        center: [116.403, 39.923],
        zoom: 12,
        style: purpleStyle
      });
      // console.log(this.view);
      this.view = new mapvgl.View({
        map:this.map
      });
    },

    addPonit1(){
      console.log(this.hotData, 'hotData');
      if(this.downSelectData !== ''){
        this.addPoint()
      }else{
        this.$message({
          message: '请选择合适的数据',
          type: 'error'
        });
      }
    },
    //散点图功能 mapV
    addPoint(){
      // this.request.get("/taxiData/clickHot",
      //     {
      //       params:{
      //         downSelectData: this.downSelectData,
      //       }
      //     },
      // ).then(res => {

        let newData= [];
        // console.log(res.data,'后台请求到数据res.data');
        for (let i = 0; i<this.scatterData.length;i++)
        {
          let itemlat = this.scatterData[i].lat;
          let itemlng = this.scatterData[i].lng;
          newData.push({
            geometry:{
              type:'Point',
              coordinates:[itemlng,itemlat],
            },
            time:{
              //随机100个时间
              time:Math.random()*100
            }
          })
        }
        setTimeout(() => {
          this.clean()
          this.initMapv()
          console.log(this.map)
          this.view.addLayer(
                  new mapvgl.PointLayer({
                    blend: 'lighter',
                    shape: 'circle',
                    color: 'rgba(46, 139, 87, 0.9)',
                    size: 3,
                    data: newData,
                  })
          )
          console.log('渲染成功');
        },0)

      // })
    },

    addPonit2(){
      console.log(this.hotData, 'hotData');
      if(this.downSelectData !== ''){
        this.addScatter()
      }else{
        this.$message({
          message: '请选择合适的数据',
          type: 'error'
        });
      }
    },
    addScatter(){
      // this.request.get("/taxiData/scatterMap1",
      //     {
      //       params:{
      //         downSelectData: this.downSelectData,
      //       }
      //     },
      // ).then(res => {
      //     console.log(res.data,'res.data echarts后台请求数据');
      // //读取文件
      // const converData = function (data) {
        const Scatterdata = [];
        //遍历获取的所有数据
        for (let i = 1; i < this.scatterData.length; i++) {
          //赋值经纬度
          if (this.scatterData[i - 1].cid != this.scatterData[i].cid) {
            Scatterdata.push([
              Number(this.scatterData[i - 1].lng) + 0.0125,
              Number(this.scatterData[i - 1].lat) + 0.007
            ])
          }
        }
        Scatterdata.push([
          Number(this.scatterData[this.scatterData.length - 1].lng) + 0.0125,
          Number(this.scatterData[this.scatterData.length - 1].lat) + 0.007
        ])
        console.log(Scatterdata);
        // return Scatterdata
      // }

          this.clean()
          this.map = this.$echarts.init(this.$refs.map)
          this.map.setOption({
            bmap: {
              center: [this.mapLng, this.mapLat],
              zoom: this.mapZoom,
              roam: true,
            }, //bmap
          })
          this.map.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)


          setTimeout(() => {
            let mapData = {
              title: '',
              mapColor: '#5c9ac1',   //地图填充颜色
              borderColor: '#5278a7',//地图边框颜色
              shadowColor: '#5174a4', //阴影颜色
              shadowBlur: 1, //地图阴影
              setIntervalTime: 3000,  //默认刷新时间3秒
            };

            const option = {
              title: {
                text: '',
                right: '20px',
                top: 26,
                textStyle: {
                  fontSize: 23,
                  color: '#feb64d'
                }
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: mapData.mapColor,
                  borderColor: mapData.borderColor,
                  shadowColor: mapData.shadowColor,
                  shadowBlur: mapData.shadowBlur
                },
                emphasis: {
                  areaColor: mapData.mapColor,
                }
              },
              series: [{
                type: 'scatterGL',
                coordinateSystem: 'bmap',
                // data: res.data,
                data: Scatterdata,
                progressive: 1e6,
                progressiveThreshold: 100,
                symbolSize: function () {
                  return 5;
                },
                blendMode: 'lighter',
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    color: 'rgba(46, 139, 87,0.9)'
                    //  color: 'rgb(0, 38, 70,1)' // 100% 处的颜色
                  }
                },
                zlevel: 3
              }],
            }
            this.map.setOption(option)
            console.log('echarts后台请求数据渲染成功');
          },0)

      // })
    },

    clean: function () {
      // console.log(this.view)
      this.view.removeAllLayers()
      // console.log(this.view)

    }
  },
  beforeDestroy() {
    this.$store.commit('refresh')
  },
};
</script>

<style scoped>
  #app{
    position: relative;
    height:100%;
    width:100%;
  }
  #loading {
    z-index: 99;
    position:absolute;
    top: 50%;
    left: 48%;
    margin-left: -130px;
    text-align: center;
    margin-top: -50px;
    width: 280px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: yellow;
    font-size: 20px;
  }
  .VisualShow{
    /*display: flex;*/
    /*justify-content:center;*/
    /*align-items:center;*/
  }
  #menuLeft {
    position: absolute;
    top: 20px;
    left: 12px;
    width: 22%;
    height: 30%;
    z-index: 100;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background-color: rgba(49, 51, 53, 0.7);
    background-image: url("../../assets/image/public_resource/border_new1.png");
    background-size: 100% 100%;
    /*opacity: 0.8;*/
    border-radius: 20px;
    overflow: auto;
  }
  #step1{
    margin-left: 45px;
  }
  #step2{
    margin-left: 45px;
  }
</style>
